<template>
  <a-modal :visible="visible" @cancel="cancelBtn" :title="title">
    <template #footer>
      <a-row type="flex" justify="space-between">
        <a-col>
          <a-button v-if="from !== 'contract'" @click="downloadUrl"
            ><DownloadOutlined />模板下载</a-button
          ></a-col
        >
        <a-col>
          <a-button @click="cancelBtn">取消</a-button>
          <a-button type="primary" @click="handleOk" :loading="uploadLoading"
            >{{ uploadLoading ? "导入中" : "确认" }}
          </a-button></a-col
        >
      </a-row>
    </template>
    <!-- :action="$utils.localFileAction" -->
    <a-upload-dragger
      :fileList="fileList"
      :multiple="false"
      :before-upload="beforeUpload"
      accept=".xlsx,.xls"
      @remove="handleRemove"
    >
      <p class="ant-upload-drag-icon">
        <inbox-outlined></inbox-outlined>
      </p>
      <p class="ant-upload-text">点击或将文件拖拽到这里上传</p>
      <p class="ant-upload-hint">支持扩展名: .xls,.xlsx</p>
    </a-upload-dragger>
  </a-modal>
</template>

<script>
import { defineComponent, ref, watch, createVNode, h } from "vue";
import {
  InboxOutlined,
  DownloadOutlined,
  InfoCircleTwoTone,
  ExclamationCircleOutlined,
} from "@ant-design/icons-vue";
import { message } from "ant-design-vue";
import request from "../../../../common/utils/request";
import { Modal } from "ant-design-vue";
export default defineComponent({
  name: "Import",
  components: { InboxOutlined, DownloadOutlined },
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    title: {
      type: String,
      default: "导入业户",
    },
    from: {
      type: String,
      default: "", // contract
    },
  },
  setup(props, context) {
    const cancelBtn = () => {
      context.emit("clear");
    };
    const uploadLoading = ref(false);
    const handleOk = () => {
      if (props.from === "contract") {
        return;
      }
      const formData = new FormData();
      formData.append("file", fileList.value[0]);
      uploadLoading.value = true;
      request.post("/org", "/owner/import/file", formData).then((res) => {
        if (res.fileUrl) {
          Modal.confirm({
            title: "导入错误",
            icon: createVNode(ExclamationCircleOutlined),
            content: () =>
              h("div", { style: "color:#666;" }, [
                h("div", {}, `有误条数: ${res.errorRow} `),
                h("div", {}, " 请下载反馈文档，导入结果可以帮助您更快锁定问题"),
              ]),
            okText: "下载文档",
            cancelText: "返回",
            onOk() {
              let info = {
              type: "selectDownloadFiles",
              url: res.fileUrl,
              };
              window.microApp.forceDispatch(info);
            },
          });
          uploadLoading.value = false;
          return;
        }
        message.success("导入成功");
        fileList.value = [];
        context.emit("refresh");
        uploadLoading.value = false;
      });
    };
    //下载模板
    const iframe = document.createElement("iframe");
    const downloadUrl = () => {
      request.get("/org", "/owner/import/demofile").then((res) => {
        iframe.src = res.fileUrl;
        iframe.style.display = "none";
        document.body.appendChild(iframe);
        setTimeout(() => {
          document.body.removeChild(iframe);
        }, 1000);
      });
    };

    // 导入房源
    const fileList = ref([]);
    const beforeUpload = (file) => {
      fileList.value = [file];
      return false;
    };
    // 移除文件
    const handleRemove = (file) => {
      const index = fileList.value.indexOf(file);
      const newFileList = fileList.value.slice();
      newFileList.splice(index, 1);
      fileList.value = newFileList;
    };

    watch(
      () => props.visible,
      (val) => {
        if (!val) {
          fileList.value = [];
        }
      }
    );

    return {
      beforeUpload,
      handleRemove,
      handleOk,
      cancelBtn,
      fileList,
      downloadUrl,
      uploadLoading,
    };
  },
});
</script>

<style></style>
